<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes">
    <title>地标考试</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .container2 {
            background-image: url(http://img.ishangtong.com/baeimages/wICwpgWBwl.jpg);
            background-attachment: inherit;
            background-size: cover;
            -webkit-background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat no-repeat;
            width:100%;
            height:100%;
            overflow:hidden;
            position: fixed;
            z-index:1;
        }
        dl {
            margin-bottom: 10px;
        }
        .xuanze {
            margin-bottom: 10px;
            padding: 5px 5px 10px 5px;
            border-radius: 5px;
            background-color: #fff;
            overflow:hidden;
        }
        .xuanze h2{
            font-size:14px;
            margin:0;
            padding:3px 5px 8px 5px;
        }
        .xuanze ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .xuanze ul li{
            float:left;
            width:50%;
            list-style:none;
        }
        .xuanze ul li .xuanxiang{
            margin: 0 5px;
            background-color: #fff;
            text-align: center;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(204, 204, 204, 0.59);
        }
        .xuanze ul li .xuanxiang i {
            position: absolute;
            right: 5px;
            top: 5px;
            padding: 5px;
            /*background:url(index/fy/ok2.png) no-repeat #fff center center;*/
            background-size:70% 70%;
            width: 36px;
            height: 36px;
            border-radius: 100%;
            display: none;
            opacity: 0;
            -webkit-transition: opacity 0.3s ease;
            box-shadow: 0px 0px 0px 2px rgba(217, 83, 79, 0.6);
        }
        .xuanze ul li .xuanxiang img{
            width:100%;
        }
        .xuanze ul li .xuanxiang p{
            font-size:16px;
            line-height:30px;
            margin:0;
        }
        .xuanze ul .active {
            background-color:#d9534f !important;
            color:#FFF;
            border: 1px solid #d9534f !important;
        }
        .xuanze ul .active i {
            display: block !important;
            opacity: 1 !important;
        }
        .label.label-success{
            height:50px;
        }
        html, body {
            width:100%;
            height:100%;
        }
        hr {
            margin-top:0;
            margin-bottom:10px
        }
        h1 {
            font-size:26px
        }
        h2 {
            font-size:24px
        }
        h3 {
            font-size:16px
        }
        h4 {
            font-size:14px
        }
        .f18 {
            font-size:18px
        }
        .bold {
            font-weight:bold
        }
        .header {
            margin:40px 0 20px;
            color:#fff
        }
        .header h1 {
            text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
            margin-top:0;
            padding:8px 0
        }
        .header h1, .header p {
            background:-moz-linear-gradient(left, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .23) 13%, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, .67) 50%, rgba(0, 0, 0, .55) 71%, rgba(0, 0, 0, .36) 81%, rgba(0, 0, 0, 0) 100%);
            background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, .01)), color-stop(13%, rgba(0, 0, 0, .23)), color-stop(29%, rgba(0, 0, 0, .5)), color-stop(50%, rgba(0, 0, 0, .67)), color-stop(71%, rgba(0, 0, 0, .55)), color-stop(81%, rgba(0, 0, 0, .36)), color-stop(100%, rgba(0, 0, 0, 0)));
            background:-webkit-linear-gradient(left, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .23) 13%, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, .67) 50%, rgba(0, 0, 0, .55) 71%, rgba(0, 0, 0, .36) 81%, rgba(0, 0, 0, 0) 100%);
            background:-o-linear-gradient(left, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .23) 13%, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, .67) 50%, rgba(0, 0, 0, .55) 71%, rgba(0, 0, 0, .36) 81%, rgba(0, 0, 0, 0) 100%);
            background:-ms-linear-gradient(left, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .23) 13%, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, .67) 50%, rgba(0, 0, 0, .55) 71%, rgba(0, 0, 0, .36) 81%, rgba(0, 0, 0, 0) 100%);
            background:linear-gradient(to right, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .23) 13%, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, .67) 50%, rgba(0, 0, 0, .55) 71%, rgba(0, 0, 0, .36) 81%, rgba(0, 0, 0, 0) 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#03000000', endColorstr='#00000000', GradientType=1)
        }
        .panel {
            background-color: rgba(255, 255, 255, 0.8);
        }
        .btn-danger{
            filter:alpha(opacity=80);
            -moz-opacity:.8;
            -khtml-opacity:.8;
            opacity:.8;
        }
        .yjgz {
            margin:0 15px 15px 15px;
        }
        .yjgz img{
            border-radius: 6px;
        }
        .list-group {
            margin-bottom: 0;
        }
        .container1 {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            position:absolute;
            z-index:2;
            width: 100%;
        }
        .header {
            position:relative
        }
        .avatar1 {
            display:none;
        ;
            width:100%;
            position:absolute;
            left:0;
            bottom:-90px;
            z-index:999
        }
        .avatar1 .img-circle {
            width:80px;
            height:80px;
            background:#5CB85C;
            line-height:80px;
            margin:0 auto;
            color:#fff;
            font-size:30px
        }
        .panel-body {
            padding-top:15px
        }
        .js_result h1 {
            font-size:1.5em;
            margin-top:10px
        }
        .js_result dt {
            margin-bottom:10px
        }
        .list-group-item {
            border-radius:0 ;
            background-color: rgba(255, 255, 255, 0.8);
        }
        .glyphicon-unchecked {
            background:url('') no-repeat center center;
            background-size:16px 16px
        }
        .glyphicon-ok {
            background:url('') no-repeat center center;
            background-size:16px 16px
        }
        .footer a {
            color:#FFF;
            line-height:30px;
            padding:5px 0
        }
        .loads {
            width:46px;
            height:46px;
            position:absolute;
            left:50%;
            top:50%;
            margin:-23px 0 0 -23px;
            display:inline-block;
            background-position:left top
        }
        .loads, .loads i {
            /*background-image:url(../img/loading.png);*/
            background-repeat:no-repeat;
            display:inline-block;
            -webkit-background-size:92px 46px;
            -moz-background-size:92px 46px;
            -o-background-size:92px 46px;
            background-size:92px 46px
        }
        .loads i {
            width:46px;
            height:46px;
            background-position:right top;
            -webkit-animation-name:rotateRight;
            -webkit-animation-duration:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-timing-function:linear
        }
        @-webkit-keyframes rotateRight {
            from {
                -webkit-transform:rotate(360deg)
            }
            to {
                -webkit-transform:rotate(0deg)
            }
        }
        #mcover {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0, 0, 0, 0.7);
            display:none;
            z-index:20000;
        }
        #mcover img {
            position:fixed;
            right: 18px;
            top:5px;
            width:260px;
            height:180px;
            z-index:20001;
        }
        .list-group-item:hover {
            background-color: rgba(231, 230, 230, 0.8);
        }
        .list-group-item:active {
            background-color: rgba(231, 230, 230, 0.8);
        }
        .copyright {
            padding:8px;
            text-align:center;
            font-size:14px;
            color:#666;
        }
        .copyright a {
            color:#666;
        }
    </style>

</head>

<body>
<div class="container1">
    <div class="text-center header">
        <h1 class="bold">地标考试</h1>
        <div style="margin-bottom:10px">
            <span class="label label-success">已有712位爱重庆的娃娃们参与测试</span>
        </div>
        <div id = "tj" style="display:none" class="progress progress-bar-danger progress-bar-striped active" style="text-align:center;position:relative">
            <span style="display:block;position: absolute;width:100%;">
                第<span id="ts">1</span>题/共20题&nbsp;&nbsp;&nbsp;&nbsp;已经过去了
                <span id="his" style="display:none">0</span>
                <span id="d" style="display:none">分</span>
                <span id="time">0</span>秒</span>
            <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 5%"></div>
        </div>
        <div class="avatar1 text-center">
            <div class="img-circle">
                <span class="glyphicon glyphicon-pencil"></span>
            </div>
        </div>
    </div>
    <div id="bd" class="panel">
        <div id="panel1" class="panel-body">
            <dl>
                <dd style="font-size:16px;">
                    身为重庆人~住在重庆城~<br />
                    重庆有很多美丽的地标~你知道几个？<br />
                    快来测试一下，看看作为一个重庆人不得不知的这些地方？！</dd>
            </dl>
            <div class="buttons">
                <a href="javascript:;" class="btn btn-lg btn-danger btn-block" onclick="return begin('0', '0', false);">开始测试</a>
            </div>
        </div>

        <div id="choose_0" style="display: none;">
            <foreach name="answer" item="answer">
                <div id="panel2" class="panel-body js_answer" style="display: none;">
                    <dl>
                        <dd>{$answer['title']}</dd>
                    </dl>
                    <dl>
                        <dd>
                            <img src="{$answer['img']}" width="100%">
                        </dd>
                    </dl>
                    <ul class="list-group js_group">
                        <foreach name="answer['list']" item="list">
                            <li class="list-group-item" data-score="{$list['true']}" onclick="return toggle(this, '0');">
                                <i class="glyphicon glyphicon-unchecked"></i>{$list['content']}
                            </li>
                        </foreach>
                    </ul>
                </div>
            </foreach>

        </div>

        <div id="result_0" style="display: none;">
            <div id="panel3" class="panel-body js_result" data-id="0" style="display:none;">
                <h1 class="bold text-danger">得分：<span class="js_result_score"></span></h1>
                <hr>
                <dl>
                    <dt>详细分析:</dt>
                    <dd>
                        <p>不得不说你了~赶紧约上你的男友~女友~以及...一起来次重庆地标一日游吧！（关注【重庆号外】，回复“地标考试”，即可查看考试答案。还有更多重庆考试等你来挑战哦~）</p>
                    </dd>
                </dl>
                <div class="buttons" style=" display:none">
                    <a href="javascript:void(0)" class="btn btn-lg btn-success" style="width:100%" onclick="$('#mcover').show()">分享给朋友(圈)</a>
                </div>
            </div>
            <div id="panel3" class="panel-body js_result" data-id="1" style="display:none;">
                <h1 class="bold text-danger">得分：<span class="js_result_score"></span></h1>
                <hr>
                <dl>
                    <dt>详细分析:</dt>
                    <dd>
                        <p>还差点儿哦！连格都及不到，撇火药~~~~啦啦啦~不服再战啊！！（关注【重庆号外】，回复“地标考试”，即可查看考试答案。还有更多重庆考试等你来挑战哦~）</p>
                    </dd>
                </dl>
                <div class="buttons" style=" display:none">
                    <a href="javascript:void(0)" class="btn btn-lg btn-success" style="width:100%" onclick="$('#mcover').show()">分享给朋友(圈)</a>
                </div>
            </div>
            <div id="panel3" class="panel-body js_result" data-id="2" style="display:none;">
                <h1 class="bold text-danger">得分：<span class="js_result_score"></span></h1>
                <hr>
                <dl>
                    <dt>详细分析:</dt>
                    <dd>
                        <p>哈哈~棒棒哒~赶紧转发朋友圈，今年必大发！（关注【重庆号外】，回复“地标考试”，即可查看考试答案。还有更多重庆考试等你来挑战哦~）</p>
                    </dd>
                </dl>
                <div class="buttons" style=" display:none">
                    <a href="javascript:void(0)" class="btn btn-lg btn-success" style="width:100%" onclick="$('#mcover').show()">分享给朋友(圈)</a>
                </div>
            </div>
            <div id="panel3" class="panel-body js_result" data-id="3" style="display:none;">
                <h1 class="bold text-danger">得分：<span class="js_result_score"></span></h1>
                <hr>
                <dl>
                    <dt>详细分析:</dt>
                    <dd>
                        <p>哇！重庆妹儿（崽儿）都喜欢你了~~赶紧炫耀一下吧！（关注【重庆号外】，回复“地标考试”，即可查看考试答案。还有更多重庆考试等你来挑战哦~）</p>
                    </dd>
                </dl>
                <div class="buttons" style=" display:none">
                    <a href="javascript:void(0)" class="btn btn-lg btn-success" style="width:100%" onclick="$('#mcover').show()">分享给朋友(圈)</a>
                </div>
            </div>
            <input type="hidden" id="result_score_0" value="0" >
        </div>

        <div class="yjgz">
            <a href="http://mp.weixin.qq.com/s?__biz=MzAwNjI3MjkwNA==&mid=207769877&idx=1&sn=1bc2879893a5fbe1afb112785b1a18e8#rd"><img src="http://7xjdjp.com1.z0.glb.clouddn.com/1433399585524.png" style="width:100%"></a>        </div>
    </div>
    <div class="copyright">@重庆号外  版权所有</div>
    <div id="mcover" onclick="$(this).hide()">
        <img src="http://pic.vshangtong.com/index/fy/guide.png">
    </div>
    <div class="loads" style="display: none;"><i></i></div>
    <img src="http://img.users.51.la/17221117.asp" style="display:none;" />
    <script src="http://pic.vshangtong.com/index/fy/zepto.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
    <script>
        var appIdstr='wx6c8bc00377f16526';
        var timestampstr = '1434349573';
        var nonceStrstr='UdE1VRoGGWziDyEi';
        var signaturestr='f3a10714fbf9f555214e0e02f5fe20ec9a439ebf';
    </script>
    <script type="text/javascript">
        var start = 1;
        var tScore = 0;
        var s_scoreArr = new Array();
        var e_scoreArr = new Array();
        var number = new Array();
        s_scoreArr[0] = new Array();
        e_scoreArr[0] = new Array();
        s_scoreArr[0][0] = '0';
        e_scoreArr[0][0] = '30';
        s_scoreArr[0][1] = '31';
        e_scoreArr[0][1] = '60';
        s_scoreArr[0][2] = '61';
        e_scoreArr[0][2] = '80';
        s_scoreArr[0][3] = '81';
        e_scoreArr[0][3] = '100';
        number[0] = '20';

        function begin(t, n, f){
            if(f) {
                $("#xz_"+t).addClass('active');
                setTimeout(function() {
                    $(".panel-body").hide();
                    $("#choose_"+t).show();
                    $("#choose_"+t).find(".js_answer").eq(n).show();
                }, 300);
            } else {
                $(".panel-body").hide();
                $("#choose_"+t).show();
                $("#choose_"+t).find(".js_answer").eq(n).show();
            }
        }

        function result(score, t){
            $(".panel-body").hide();
            $("#result_"+t).show();
            for (var i = 0; i < s_scoreArr[t].length; i++) {
                if (parseInt(score) >= parseInt(s_scoreArr[t][i]) && parseInt(score) <= parseInt(e_scoreArr[t][i])) {
                    $("#result_"+t).find(".js_result_score").eq(i).text(score);
                    $("#result_"+t).find(".js_result").eq(i).show();
                    $("#result_score_"+t).val(score);
                    weixin_share(t);
                    tScore = 0;
                    return false;
                } else {
                    continue;
                }
            };
        }

        function toggle(o, t){
            $(".list-group-item").removeClass('active')
            var score = $(o).attr("data-score");
            tScore  = parseInt(tScore) + parseInt(score);
            $(o).find('i').removeClass('glyphicon-unchecked').addClass('glyphicon-ok');
            var n = $("#choose_"+t).find(".js_answer").index($(o).parents(".js_answer")) + 1;
            if(n == number[t]){
                result(tScore, t);
            } else {
                setTimeout(function(){
                    begin(t, n, false);
                },300);
            }
        }

        Zepto(function($){
            $('.loads').hide();
        });

        wx.config({
            debug: false,
            appId: appIdstr,
            timestamp: timestampstr,
            nonceStr: nonceStrstr,
            signature: signaturestr,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard'
            ]
        });

        weixin_share(0);

        function weixin_share(t) {
            var title = '【重庆地标考试】';
            var desc = '我在重庆地标考试中得了[n]分！有比我还高的分数吗？不服请来战！';
            var result_score = $("#result_score_"+t).val();
            var wxData = {
                "share_image" : 'http://img.ishangtong.com/baeimages/H1Lezw0P2V.jpg',
                "share_url" : "http://weixin.woaichongqing.com/index.php?ac=fy_index&fy_id=258&id=5a33f6bd38acca44c5c3cc98cf952b92",
                "share_desc" : desc.replace('[n]', result_score),
                "share_title" : title.replace('[n]', result_score)
            };
            wx.ready(function () {
                wx.onMenuShareAppMessage({
                    title: wxData.share_title,
                    desc: wxData.share_desc,
                    link: wxData.share_url,
                    imgUrl: wxData.share_image,
                    trigger: function (res) {
                    },
                    success: function (res) {
                        window.location.href='http://mp.weixin.qq.com/s?__biz=MzAwNjI3MjkwNA==&mid=207769877&idx=1&sn=1bc2879893a5fbe1afb112785b1a18e8#rd';

                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
                wx.onMenuShareTimeline({
                    title: wxData.share_title,
                    link: wxData.share_url,
                    imgUrl: wxData.share_image,
                    trigger: function (res) {
                    },
                    success: function (res) {
                        window.location.href='http://mp.weixin.qq.com/s?__biz=MzAwNjI3MjkwNA==&mid=207769877&idx=1&sn=1bc2879893a5fbe1afb112785b1a18e8#rd';

                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
                wx.onMenuShareQQ({
                    title: wxData.share_title,
                    desc: wxData.share_desc,
                    link: wxData.share_url,
                    imgUrl: wxData.share_image,
                    trigger: function (res) {
                    },
                    complete: function (res) {
                    },
                    success: function (res) {
                        window.location.href='http://mp.weixin.qq.com/s?__biz=MzAwNjI3MjkwNA==&mid=207769877&idx=1&sn=1bc2879893a5fbe1afb112785b1a18e8#rd';

                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
                wx.onMenuShareWeibo({
                    title: wxData.share_title,
                    desc: wxData.share_desc,
                    link: wxData.share_url,
                    imgUrl: wxData.share_image,
                    trigger: function (res) {
                    },
                    complete: function (res) {
                    },
                    success: function (res) {
                        window.location.href='http://mp.weixin.qq.com/s?__biz=MzAwNjI3MjkwNA==&mid=207769877&idx=1&sn=1bc2879893a5fbe1afb112785b1a18e8#rd';

                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
            });
        }
    </script>
    <div class="hide"></div>
</div>
<div class="container2"></div>
</body>
<script>
    function timeI(){
        var time = $("#time").html();
        if(time == 59){
            $("#his").show();
            $("#d").show();
            var t = $("#his").html();
            if(time%59 == 0){
                $("#his").html(parseInt(t)+parseInt(1));
                $("#time").html("0");
            }
        }else{
            $("#time").html((parseInt(time)+parseInt(1)));
        }
    }
    $(function(){
        $(".buttons").click(function(){
            $(".list-group > li").click(function(){
                var w = $(".progress-bar-info").css("width");
                var q = parseInt(w)+parseInt("5");
                //alert(q);
                var ts = $("#ts").html();
                $("#ts").html(parseInt(ts)+parseInt(1));
                $(".progress-bar-info").css("width",q+"%");
            })
            $("#tj").show();
            setInterval("timeI()",1000);
        })
    })
</script>
</html>